---
slug: mobx封装 #路径，不能重复
title: mobx封装 # 标题
authors: [] # 作者，在authors.yml配置
tags: [facebook, hello, docusaurus] # 标签，在tags.yml配置
toc_min_heading_level: 2 # 最小展示标题
toc_max_heading_level: 5 # 最大展示标题
---

## store

### 定义各个分散的store
```js  title="src/store/VoteStore.js"
import {makeObservable,observable,action} from 'mobx';

export default class VoteStore {
    constructor(){
        makeObservable(this,{
            num:observable,
            change:action.bound
        });
    }

    num =  10;

    change(){
        this.num++;
    }
}

```

```js title="src/store/PersonalStore.js"
import {observable, action,makeObservable} from 'mobx';

export default class PersonalStore {

    constructor(){
        makeObservable(this,{
            num:observable,
            add:action,
        })
    }

    num = 10;

    add(){
        this.num++;
    }

}

```
### 合并store

```js title="src/store/index.js"

import VoteStore from "./VoteStore";
import PersonalStore from "./PersonalStore";

class Store{
    constructor() {
        this.vote = new VoteStore();
        this.personalStore = new PersonalStore();
    }
}

export const store = new Store();
```

#### 但是子store取不到根store
> 就是在vote内部取不到personal的num,改动方式就是把根store的this传进去，子store存一下，这样可以了
```js title="src/store/index.js"

import VoteStore from "./VoteStore";
import PersonalStore from "./PersonalStore";

class Store{
    constructor() {
        this.vote = new VoteStore(this);
        this.personalStore = new PersonalStore(this);
    }
}

export const store = new Store();
```
##### 子store接收根store的this
> 这时候root就是根store了，想在`PersonalStore`里面调用`VoteStore`的内容,直接`this.root.vote`就可以了

```js title="src/store/PersonalStore.js"
import {observable, action,makeObservable} from 'mobx';

export default class PersonalStore {

    constructor(root){
        this.root = root;
        makeObservable(this,{
            num:observable,
            add:action,
        })
    }

    num = 10;

    add(){
        this.num++;
    }

}

```


:::info
这样得出来的`store`就是下面这样的
```js
store =  {
    vote:{
        num:10,
        change:function (){
            //....
        },
        __proto__:VoteStore.prototype
    },
    personal:{
        num:10,
        change:function (){
            //....
        },
        __proto__:PersonalStore.prototype
    },
    __proto__:Store.prototype
}
```
:::

## 使用

### 引入store

#### 根组件

```js title="src/index.js"
//react引入的那堆省略。。。。只关注mobx
import {store as mobxStore} from './store/mobx';
import {Provider as MobxProvider} from 'mobx-react';
import MobxComp from 'src/study/MobxComp';//使用的组件
root.render(
            <>
                {/*等价于 vote={mobxStore.vote} personal={mobxStore.personal}/>*/}
                <MobxProvider {...mobxStore}>
                    <App/>
                </MobxProvider>
            </>
        )
```

#### 子组件

```jsx title="sudy/MobxComp.jsx"
import React, {useContext} from 'react';
import {observer,MobXProviderContext} from 'mobx-react';
import {Button} from "antd";

const MobxEncapsulationComp = observer(()=> {
    const vote = useContext(MobXProviderContext).vote;
    console.log(vote);
    return (
        <>
            <div>
                数量:{vote.num}
                <Button onClick={()=>vote.change()}>
                    +
                </Button>
            </div>
        </>
    )
})

export default MobxEncapsulationComp;

```

